<head>
    <link rel="stylesheet" href="./atlas.css" />
</head>

<body>
    <div
        class="background"
        style="
            background: url(../../original_ill/996.李化禹.png) no-repeat;
            background-size: cover;
        "
    >
        <img src="../../original_ill/ill/996.李化禹.png" alt="曲绘-模糊" />
    </div>
    <div class="big-box">
        <div class="box">
            <div class="info-box">
                <div class="name-box">
                    <div class="song">
                        <p name="pvis">{{song}}</p>
                    </div>
                    <div class="composer">
                        <p name="pvis">{{composer}}</p>
                    </div>
                </div>
                <div class="charts-box">
                    <div class="length">
                        <p>{{length}}</p>
                    </div>
                    <div class="txt">
                        <div class="sqrt">
                            <p>SONG'S_INFO</p>
                        </div>
                        <div class="line">
                            <p id="other-info">
                                aaaaaaaaaaaaaaaaaaaaaaaaa
                                aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                            </p>
                        </div>
                    </div>
                    <div class="chart">
                        <div class="rankbkg">
                            <div class="sqr"></div>
                            <div class="sqr rank-ez"></div>
                            <div class="sqr rank-hd"></div>
                            <div class="sqr rank-in"></div>
                            <div class="sqr rank-at"></div>
                        </div>
                        <div class="rank">
                            <p>\</p>
                            <p>EZ</p>
                            <p>HD</p>
                            <p>IN</p>
                            <p>AT</p>
                        </div>
                        <div class="note-box">
                            <p>Difficulty</p>
                            <p>14.0</p>
                            <p>14.0</p>
                            <p>14.0</p>
                            <p>14.0</p>
                        </div>
                        <div class="rank-box">
                            <div class="charter">
                                <p>Charter</p>
                            </div>
                            <div class="chart-info">
                                <p>Tap</p>
                                <p>Drag</p>
                                <p>Hold</p>
                                <p>Flick</p>
                            </div>
                            <div class="charter">
                                <p name="pvis">
                                    Barbarianerman, Main theme within the
                                    somnium
                                </p>
                            </div>
                            <div class="chart-info">
                                <p>1000</p>
                                <p>1000</p>
                                <p>1000</p>
                                <p>1000</p>
                            </div>
                            <div class="charter">
                                <p>Barbarianerman & NerSAN in the ICU</p>
                            </div>
                            <div class="chart-info">
                                <p>1000</p>
                                <p>1000</p>
                                <p>1000</p>
                                <p>1000</p>
                            </div>
                            <div class="charter">
                                <p>Barbarianerman & NerSAN in the ICU</p>
                            </div>
                            <div class="chart-info">
                                <p>1000</p>
                                <p>1000</p>
                                <p>1000</p>
                                <p>1000</p>
                            </div>
                            <div class="charter">
                                <p>Barbarianerman & NerSAN in the ICU</p>
                            </div>
                            <div class="chart-info">
                                <p>1000</p>
                                <p>1000</p>
                                <p>1000</p>
                                <p>1000</p>
                            </div>
                        </div>
                        <div class="note-box">
                            <p>Total</p>
                            <p>4000</p>
                            <p>4000</p>
                            <p>4000</p>
                            <p>4000</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="ill-box">
                <img src="../../original_ill/ill/996.李化禹.png" alt="曲绘" />
            </div>
        </div>
        <div class="other-info">
            <div class="other-box">
                <div class="title">
                    <p>BPM</p>
                </div>
                <div class="dcr">
                    <p>180</p>
                </div>
            </div>
            <div class="other-box">
                <div class="title">
                    <p>Illustrator</p>
                </div>
                <div class="dcr">
                    <p>李化禹</p>
                </div>
            </div>
            <div class="other-box">
                <div class="title">
                    <p>Chapter</p>
                </div>
                <div class="dcr">
                    <p>Chapter Legacy 过去的章节</p>
                </div>
            </div>
        </div>
        <div class="leave">
            <div class="leave-box">
                <div class="leave-ez">
                    <div class="ldif">
                        <p name="pvis">{{$value.difficulty}}</p>
                    </div>
                    <div class="lrank">
                        <p name="pvis">{{$index}}</p>
                    </div>
                </div>
                <div class="leave-hd">
                    <div class="ldif">
                        <p name="pvis">{{$value.difficulty}}</p>
                    </div>
                    <div class="lrank">
                        <p name="pvis">{{$index}}</p>
                    </div>
                </div>
                <div class="leave-in">
                    <div class="ldif">
                        <p name="pvis">{{$value.difficulty}}</p>
                    </div>
                    <div class="lrank">
                        <p name="pvis">{{$index}}</p>
                    </div>
                </div>
                <div class="leave-at">
                    <div class="ldif">
                        <p name="pvis">{{$value.difficulty}}</p>
                    </div>
                    <div class="lrank">
                        <p name="pvis">{{$index}}</p>
                    </div>
                </div>
                <div
                    class="leave-sp"
                    style="background-color: rgb(0, 255, 149)"
                >
                    <div class="ldif">
                        <p name="pvis">{{$value.difficulty}}</p>
                    </div>
                    <div class="lrank">
                        <p name="pvis">{{$index}}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="comment-box">
        <div class="comment_title">
            <p>Comments</p>
            <p>{{comment_command}}</p>
        </div>
        <div class="a_comment">
            <div class="avatar">
                <img
                    src="../avatar/ShineAfter_鸠+水青_Special_Avatar.png"
                    alt="{{user.avatar}}"
                />
            </div>
            <div class="userInfo">
                <div class="playerId">
                    <p>就是不会告诉你</p>
                </div>
                <div class="rks">
                    <p>14.7028</p>
                </div>
                <div class="score IN-BKG">
                    <p>1000000</p>
                </div>
                <div class="acc IN-BKG">
                    <p>100.0000%</p>
                </div>
                <div class="spInfo colorful-background">
                    <p>Best 10 & Perfect 1</p>
                </div>
                <div class="clg_box">
                    <div class="Challenge">
                        <img src="../otherimg/5.png" alt="Challenge" />
                        <p>54</p>
                    </div>
                </div>
                <div class="time">
                    <p>2025/00/00 00:00:00</p>
                </div>
            </div>
            <div class="comment">
                <p name="pvis">1234<br>1234<br>1234<br>1234<br>1234</p>
            </div>
        </div>
    </div>
    <div class="createdbox">
        <div class="phi-plugin">
            <p>{{_plugin}}</p>
        </div>
        <div class="ver">
            <p>{{Version.ver}}</p>
        </div>
    </div>

    <!-- 曲目名称自适应name-box的宽度 -->
    <script>
        function adjustFontSize() {
            //获取p元素
            var a = document.getElementsByName("pvis");
            for (var i = 0; i < a.length; ++i) {
                const songName = a[i];

                if (!songName) continue;

                /*调整曲目名称字体大小*/
                var parentElement = songName.parentElement;

                // var maxFontSize = 100 //设置最大字体大小

                // //如果字体宽度小于父元素宽度，则增大字体大小
                // while (songName.scrollWidth < parentElement.offsetWidth && songName.scrollHeight < parentElement.offsetHeight) {
                //     var style = window.getComputedStyle(songName, null).getPropertyValue('font-size')
                //     var fontSize = parseFloat(style)

                //     //检查是否已经达到最大字体大小
                //     if (fontSize >= maxFontSize) {
                //         break
                //     }

                //     songName.style.fontSize = (fontSize + 1) + "px"
                // }

                // 如果字体宽度大于父元素宽度，则减小字体大小
                while (
                    songName.scrollWidth > parentElement.offsetWidth ||
                    songName.scrollHeight > parentElement.offsetHeight
                ) {
                    var style = window
                        .getComputedStyle(songName, null)
                        .getPropertyValue("font-size");
                    var fontSize = parseFloat(style);
                    songName.style.fontSize = fontSize - 1 + "px";
                }
            }
        }
        window.onload = adjustFontSize;
        window.onresize = adjustFontSize;
    </script>
</body>
